<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="stylesheet" href="__PUBLIC__/asset/lib/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/asset/css/common.css">
    <link href="__PUBLIC__/asset/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <link href="__PUBLIC__/asset/lib/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/platform/platform.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/iconfont.css">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/platform/safety.css">
    <!-- 设备宽度小于768->手机设备 -->
    <link rel="stylesheet" href="__PUBLIC__/asset/css/platform/768.css" media=" screen and (max-width:768px)">
    <!-- 设备宽度768~1400之间->手机/平板设备 -->
    <link rel="stylesheet" href="__PUBLIC__/asset/css/platform/768.css"
          media=" screen and (min-width:768px) and (max-width:1400px)">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/platform/1400.css"
          media=" screen and (min-width:768px) and (max-width:1400px)">
    <!-- 设备宽度大于等于1400px 使用原本样式处理 -->
    <title>{:L('cloud_cloudflare_title')}</title>
</head>

<body>
<div class="header"></div>
<div class="platform-box container-fluid">
    <!-- banner-轮播图 -->
    <div class="brand-banner"></div>
    <!-- 定位列表 -->
    <div class="platform-nav wow fadeInUp">
        <ul class="default-nav nav-list row">
            <li class="hidden-lg nav-title" data-id=""> <a><span>{:L('cloud_cloudflare_1')}</span> <i
                    class="iconfont icon-xiangshangjiantou"></i></a> </li>
            <li class="col-lg-4" data-id="#platform-product"><a><span>{:L('cloud_cloudflare_2')}</span> <i
                    class="iconfont icon-arrowdown"></i></a></li>
            <li class="col-lg-4" data-id="#platform-plan"><a><span>{:L('cloud_cloudflare_3')}</span> <i
                    class="iconfont icon-arrowdown"></i></a></li>
            <li class="col-lg-4" data-id="/contact/"><a><span>{:L('cloud_cloudflare_4')}</span> <i
                    class="iconfont icon-arrowdown"></i></a></li>
        </ul>
    </div>
    <!-- 页面主内容 -->
    <div class="platform-contetn">
        <div class="safety-box">
            <!-- 特色产品标题-->
            <div class="middle-box wow fadeInUp">
                <div class="platform-title" id="platform-product">
                    <div class="title-name frist-text">{:L('cloud_cloudflare_5')}</div>
                </div>
            </div>
            <!-- 特色产品 -->
            <div class="safety-product">
                <div class="middle-box">
                    <div class="platform-product-list wow fadeInUp">
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_6')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_7')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_8')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_9')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_10')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_11')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_12')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_13')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_14')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_15')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_16')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_17')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_18')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_19')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_20')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_21')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_22')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_23')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                        <div class="product-list-item wow fadeInUp">
                            <div class="product-item-name">
                                <span class="sec-text">{:L('cloud_cloudflare_24')}</span>
                            </div>
                            <div class="product-item-info">{:L('cloud_cloudflare_25')}</div>
                            <div class="product-item-btn row">
                                <a href="#">
                                    <i class="iconfont icon-youjiantou-  safety-icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 解决方案 -->
            <div class="platform-plan-box" id="platform-plan">
                <div class="middle-box">
                    <div class="platform-plan wow fadeInUp">
                        <div class="plan-title">
                            <div class="title-name frist-text">{:L('cloud_cloudflare_26')}</div>
                        </div>
                    </div>
                    <div class="safety-plan-list">
                        <div class="safety-plan-item wow fadeInUp">
                            <div class="safety-plan-title row">
                                <span class="col-sm-5 sec-text">{:L('cloud_cloudflare_27')}</span>
                                <div class="product-more col-lg-2 col-sm-3 col-lg-offset-5 col-sm-offset-4">

                                    <a href="#">
                                        <i class="iconfont icon-youjiantou-  frist-icon safety-icon"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="safety-plan-info info-text">
                                {:L('cloud_cloudflare_28')}<br>{:L('cloud_cloudflare_29')}:
                            </div>
                            <div class="safety-plan-btn row">
                                <div class="safety-btn-text col-sm-5 col-xs-5 info-text">Cloudflare Gateway</div>
                                <div class="safety-btn-arrow col-sm-2 col-sm-offset-5 col-xs-2 col-xs-offset-4">
                                    <i class="iconfont icon-arrowdown"></i>
                                </div>
                            </div>
                        </div>
                        <div class="safety-plan-item wow fadeInUp">
                            <div class="safety-plan-title row">
                                <span class="col-sm-5 sec-text">{:L('cloud_cloudflare_30')}</span>
                                <div class="product-more col-lg-2 col-sm-3 col-lg-offset-5 col-sm-offset-4">

                                    <a href="#">
                                        <i class="iconfont icon-youjiantou-  frist-icon safety-icon"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="safety-plan-info info-text">
                                {:L('cloud_cloudflare_31')}<br>{:L('cloud_cloudflare_32')}:
                            </div>
                            <div class="safety-plan-btn row">
                                <div class="safety-btn-text col-sm-5 col-xs-5 info-text">Cloudflare Gateway</div>
                                <div class="safety-btn-arrow col-sm-2 col-sm-offset-5 col-xs-2 col-xs-offset-4">
                                    <i class="iconfont icon-arrowdown"></i>
                                </div>
                            </div>
                        </div>
                        <div class="safety-plan-item wow fadeInUp">
                            <div class="safety-plan-title row">
                                <span class="col-sm-5 sec-text">{:L('cloud_cloudflare_33')}</span>
                                <div class="product-more col-lg-2 col-sm-3 col-lg-offset-5 col-sm-offset-4">

                                    <a href="#">
                                        <i class="iconfont icon-youjiantou-  frist-icon safety-icon"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="safety-plan-info info-text">
                                {:L('cloud_cloudflare_34')}<br>{:L('cloud_cloudflare_35')}:
                            </div>
                            <div class="safety-plan-btn row">
                                <div class="safety-btn-text col-sm-5 col-xs-5 info-text">Cloudflare Gateway</div>
                                <div class="safety-btn-arrow col-sm-2 col-sm-offset-5 col-xs-2 col-xs-offset-4">
                                    <i class="iconfont icon-arrowdown"></i>
                                </div>
                            </div>
                        </div>
                        <div class="safety-plan-item wow fadeInUp">
                            <div class="safety-plan-title row">
                                <span class="col-sm-5 sec-text">{:L('cloud_cloudflare_36')}</span>
                                <div class="product-more col-lg-2 col-sm-3 col-lg-offset-5 col-sm-offset-4">

                                    <a href="#">
                                        <i class="iconfont icon-youjiantou-  frist-icon safety-icon"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="safety-plan-info info-text">
                                {:L('cloud_cloudflare_37')}<br>{:L('cloud_cloudflare_38')}:
                            </div>
                            <div class="safety-plan-btn row">
                                <div class="safety-btn-text col-sm-5 col-xs-5 info-text">Cloudflare Gateway</div>
                                <div class="safety-btn-arrow col-sm-2 col-sm-offset-5 col-xs-2 col-xs-offset-4">
                                    <i class="iconfont icon-arrowdown"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 不同之处 -->
            <div class="safety-diff-box">
                <div class="middle-box">
                    <div class="platform-title wow fadeInUp" id="platform-product">
                        <div class="title-name frist-text">{:L('cloud_cloudflare_39')}</div>
                    </div>
                    <div class="safety-diff-list">
                        <div class="diff-item wow fadeInUp">
                            <div class="diff-item-title sec-text">
                                {:L('cloud_cloudflare_40')}
                            </div>
                            <div class="diff-item-info info-text">
                                {:L('cloud_cloudflare_41')}
                            </div>
                            <a class="diff-item-btn" href="../message/?key=test4">
                                <i class="iconfont icon-youjiantou- safety-icon"></i>
                            </a>
                        </div>
                        <div class="diff-item wow fadeInUp">
                            <div class="diff-item-title sec-text">
                                {:L('cloud_cloudflare_42')}
                            </div>
                            <div class="diff-item-info info-text">
                                {:L('cloud_cloudflare_43')}
                            </div>
                            <a class="diff-item-btn" href="../message/?key=test4">
                                <i class="iconfont icon-youjiantou- safety-icon"></i>
                            </a>
                        </div>
                        <div class="diff-item wow fadeInUp">
                            <div class="diff-item-title sec-text">
                                {:L('cloud_cloudflare_44')}
                            </div>
                            <div class="diff-item-info info-text">
                                {:L('cloud_cloudflare_45')}
                            </div>
                            <a class="diff-item-btn" href="../message/?key=test4">
                                <i class="iconfont icon-youjiantou- safety-icon"></i>
                            </a>
                        </div>
                        <div class="diff-item wow fadeInUp">
                            <div class="diff-item-title sec-text">
                                {:L('cloud_cloudflare_46')}
                            </div>
                            <div class="diff-item-info info-text">
                                {:L('cloud_cloudflare_47')}
                            </div>
                            <a class="diff-item-btn" href="../message/?key=test4">
                                <i class="iconfont icon-youjiantou- safety-icon"></i>
                            </a>
                        </div>
                        <div class="diff-item wow fadeInUp">
                            <div class="diff-item-title sec-text">
                                {:L('cloud_cloudflare_48')}
                            </div>
                            <div class="diff-item-info info-text">
                                {:L('cloud_cloudflare_49')}
                            </div>
                            <a class="diff-item-btn" href="#">
                                <i class="iconfont icon-youjiantou- safety-icon"></i>
                            </a>
                        </div>
                        <div class="diff-item wow fadeInUp">
                            <div class="diff-item-title sec-text">
                                {:L('cloud_cloudflare_50')}
                            </div>
                            <div class="diff-item-info info-text">
                                {:L('cloud_cloudflare_51')}
                            </div>
                            <a class="diff-item-btn" href="../message/?key=test4">
                                <i class="iconfont icon-youjiantou- safety-icon"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 地图区域 -->
            <div class="middle-box">
                <div class="platform-map">
                    <div class="map-info row">
                        <div class="info-left col-sm-5 wow fadeInUp">
                            <div class="platform-title" id="platform-product">
                                <div class="title-name frist-text">{:L('cloud_cloudflare_39')}</div>
                            </div>
                            <div class="map-title sec-text">
                                <div>{:L('cloud_cloudflare_52')}</div>
                                <div>{:L('cloud_cloudflare_53')}</div>
                            </div>
                            <div class="map-inner info-text">
                                {:L('cloud_cloudflare_54')}
                            </div>
                            <a class="row" href="#">
                                <i class="iconfont icon-youjiantou- frist-icon safety-icon"
                                   style="font-size: 60px;"></i>
                            </a>
                        </div>
                        <div class="info-right col-sm-7 wow fadeInUp" data-wow-delay="0.5s">
                            <img src="__PUBLIC__/asset/image/platform/safety/map.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 统计数据 -->
            <div class="middle-box">
                <div class="safety-count-box">
                    <div class="safety-count-list row">
                        <div class="safety-count-item col-sm-3 col-xs-6 flexcc wow fadeInUp">
                            <div class="safety-count-title frist-text bold">3200+</div>
                            <div class="safety-count-info">{:L('cloud_cloudflare_55')}</div>
                        </div>
                        <div class="safety-count-item col-sm-3 col-xs-6 flexcc wow fadeInUp" data-wow-delay="0.5s">
                            <div class="safety-count-title frist-text bold">12500</div>
                            <div class="safety-count-info">{:L('cloud_cloudflare_56')}</div>
                        </div>
                        <div class="safety-count-item col-sm-3 col-xs-6 flexcc wow fadeInUp">
                            <div class="safety-count-title frist-text bold">321Tbps</div>
                            <div class="safety-count-info">{:L('cloud_cloudflare_57')}</div>
                        </div>
                        <div class="safety-count-item col-sm-3 col-xs-6 flexcc wow fadeInUp" data-wow-delay="0.5s">
                            <div class="safety-count-title frist-text bold">~50<span class="uni">MS</span></div>
                            <div class="safety-count-info">{:L('cloud_cloudflare_58')}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 合作公司 -->
            <div class="middle-box">
                <div class="safety-companys" id="platform-example">
                    <div class="safety-companys-title frist-text wow fadeInUp">{:L('cloud_cloudflare_59')}</div>
                    <div class="safety-company-list">
                        <div class="safety-company-swiper wow fadeInUp">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/2.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/3.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/4.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/5.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/6.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/7.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/8.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/9.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/10.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="safety-company-swiper2 wow fadeInUp" data-wow-delay="0.5s">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/2.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/3.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/4.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/5.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/6.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/7.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/8.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/9.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="__PUBLIC__/asset/image/platform/safety/companys/10.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="brand-footer"></div>
</div>
<div class="footer"></div>
<script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script src="__PUBLIC__/asset/lib/bootstrap/bootstrap.js"></script>
<script src="__PUBLIC__/asset/lib/swiper/swiper-bundle.min.js"></script>
<script src="__PUBLIC__/asset/js/common.js"></script>
<script src="__PUBLIC__/asset/js/platform.js"></script>
<script>
    var safetySwiper = new Swiper(".safety-company-swiper", {
        slidesPerView: "auto",
        loop: true,
        speed: 900,
        autoplay: {
            delay: 1000
        }
    });
    var safetySwiper2 = new Swiper(".safety-company-swiper2", {
        slidesPerView: "auto",

        loop: true,
        speed: 900,
        autoplay: {
            delay: 1000,
            reverseDirection: true,
        }
    });
</script>
</body>

</html>